// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, Layout, AutoImageHeight } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { size, ScreenWidth } from '../../util/utils.js'

class Binding extends Component {

  constructor(props) {
    super(props)
    this.state = {

    }
  }


  componentDidMount() {
    
  }


  render() {
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="绑定公众号"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View style={{ paddingHorizontal: 16 }}>
            <Text style={{ fontSize: 14, color: '#fff', lineHeight: 20, marginTop: 16, marginBottom: 10 }}>两步操作绑定微信</Text>
            <AutoImageHeight width={343} source={require('../../static/images/51586015449.png')}/>
            <Text style={{ fontSize: 14, color: '#7484FF', lineHeight: 20, marginTop: 24, marginBottom: 12 }}>第一步 绑定微信</Text>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 12 }}>点击绑定微信按钮进行账号绑定</Text>
            <View style={{ paddingHorizontal: 22, marginTop: 4 }}>
              <TouchableOpacity style={{ height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 4, backgroundColor: '#52B03F' }}>
                <Text style={{ fontSize: 16, color: '#E4E4E4', lineHeight: 22, }}>绑定微信</Text>
              </TouchableOpacity>
            </View>
            <Text style={{ fontSize: 14, color: '#7484FF', lineHeight: 20, marginTop: 24, marginBottom: 12 }}>第二步 关注公众号</Text>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 12 }}>方法一：保存二维码至相册，用微信扫码关注打开关注公众号</Text>
            <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginBottom: 12 }}>方法二：复制公众号名称在微信中搜索并关注</Text>
            <View style={{ alignItems: 'center', marginTop: 16 }}>
              <Image resizeMode='cover' style={{ width: 60, height: 60 }} source={require('../../static/images/background.png')} />
              <TouchableOpacity style={{ marginTop: 14, width: 112, height: 24, justifyContent: 'center', alignItems: 'center', borderRadius: 12, backgroundColor: '#7484FF' }}>
                <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>绑定微信</Text>
              </TouchableOpacity>
              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 16 }}>
                <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 16, marginRight: 12 }}>公众号名称：XXXXXXXXX</Text>
                <TouchableOpacity style={{ borderBottomColor: '#7484FF', borderBottomWidth: .5 }}>
                  <Text style={{ fontSize: 12, color: '#7484FF', lineHeight: 16, }}>复制</Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ height: 20 }}></View>
          </View>
        </ScrollView>
      </Layout>
    );
  }
}


export default connect(({ userInfo }) => ({
  userInfo,
}))(pureRender(Binding))
